<template>
    <div class="wrapper-container">
        <div class="Student-track-record-img">
            <img src="https://oss.xiaoniaoai.com/bg-01012@2x.png" alt="" class="backg">
            <span class="iconfont icon-fanhui" @click= "golasts"></span>
            <p class="exchange" @click="gogift">兑换</p>
            <h2 class="ALLRecord">排行榜</h2>
            <!-- <img src="https://oss.xiaoniaoai.com/bsdk2.png" alt="" class="numberplus"> -->

            <div class="number1 number"><img :src="msg[0].avatar" alt=""><span class="one">1</span><span class="name1">{{this.msg[0].username}}</span><p class="hot0 hot hots"><span>人气值</span><span>{{this.msg[0].score}}</span></p></div>
            <div class="number2 number" v-if="seconds"><img :src="msg[1].avatar"  alt="" ><span class="two">2</span><span class="name2">{{this.msg[1].username}}</span><p class="hot1 hot"><span>人气值</span><span>{{this.msg[1].score}}</span></p></div>
            <div class="number3 number" v-if="thirds"><img :src="msg[2].avatar"  alt="" ><span class="three">3</span><span class="name3">{{this.msg[2].username}}</span><p class="hot2 hot"><span>人气值</span><span>{{this.msg[2].score}}</span></p></div> 
        </div> 
        <div class="upanddown">
             <span class="ups" @click= "boxshow = !boxshow">收起/查看</span>
        </div>
           <div class="rankname"> <img src="https://oss.xiaoniaoai.com/bk-0122.png" alt="" ><span>榜上有名</span> </div>
       <!--这里的name 和 css 类名第一个字段要一样-->
       <transition name="slide-fade"> 
        <ul class="ranklist noborder" v-show="boxshow">
            <div class="rankname hasword"> <img src="https://oss.xiaoniaoai.com/img-01.png" alt=""> <span>人气获得攻略</span></div>     
               <li class="numberli1" style="border:none;border-top-left-radius:10px;border-top-right-radius:10px ">
                   <p><span style="font-size:.4rem;font-family:PingFang-SC-Heavy;font-weight:800;color:rgba(255,189,50,1);margin-right:.2rem">01</span><span style="font-size:.28rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(116,116,116,1);">签到得人气</span> </p>
                   <p style="font-size:.22rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(152,152,152,1);">每日签到即可获得海量人气</p>
                    <p class="exchange exchange2"  @click="goindex">去签到</p>
                    <div class="picture01">
                        <img src="https://oss.xiaoniaoai.com/img-02.png" alt="">
                    </div>
               </li>
                 <li class="numberli4" style="border:none">
                   <p><span style="font-size:.4rem;font-family:PingFang-SC-Heavy;font-weight:800;color:rgba(255,189,50,1);margin-right:.2rem">02</span><span style="font-size:.28rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(116,116,116,1);">好友助力得人气</span> </p>
                   <p style="font-size:.22rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(152,152,152,1);">分享给好友，好友送花即可获得海量人气</p>
                    <p class="exchange exchange1" @click="godetail">去分享</p>
                    <div class="picture01">
                        <img src="https://oss.xiaoniaoai.com/img-03@2x.png" alt="">
                    </div>
               </li>  
               <li class="numberli3" style="border:none">
                   <p><span style="font-size:.4rem;font-family:PingFang-SC-Heavy;font-weight:800;color:rgba(255,189,50,1);margin-right:.2rem">03</span><span style="font-size:.28rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(116,116,116,1);">浏览量转化人气</span> </p>
                   <p style="font-size:.22rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(152,152,152,1);">浏览量越多，人气越高，快去分享吧</p>
                    <p class="exchange exchange1" @click="godetail">去分享</p>
                    <div class="picture01">
                        <img src="https://oss.xiaoniaoai.com/img-03@2x.png" alt="">
                    </div>
               </li>  <li class="numberli2" style="border:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px ">
                   <p><span style="font-size:.4rem;font-family:PingFang-SC-Heavy;font-weight:800;color:rgba(255,189,50,1);margin-right:.2rem">04</span><span style="font-size:.28rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(116,116,116,1);">人气兑好礼</span> </p>
                   <p style="font-size:.22rem;font-family:PingFang-SC-Regular;font-weight:400;color:rgba(152,152,152,1);">人气值积攒到一定量即可兑换好礼</p>
                    <p class="exchange exchange1"  @click="gogift">去兑换</p>
                    <div class="picture01">
                        <img src="https://oss.xiaoniaoai.com/img-05.png" alt="">
                    </div>
               </li>
                  
           </ul>
  </transition>
      <ul class="ranklist">
           <div class="rankname hasword ranksings"> <img src="https://oss.xiaoniaoai.com/img-01.png" alt="" style="top:43%;height:46%"><span>排行榜</span> </div>
            <li v-for="(items, index) of msg" :key="items.index" @click= "goother(items)">
            <span style="color:rgba(229,229,229,1);;font-size:.46rem;font-weight:800;margin-left:-4%;font-family:'PingFang-SC-Heavy';">{{index +1}}</span>
            <img :src="items.avatar" alt="">
            <span style="color:#4B4B4B;font-size:.32rem;font-weight:500;width:1.8rem">{{items.username}}</span>
            <span style="color:#FE8609;font-size:.26rem">人气值：<span>{{items.score}}</span></span>
        </li>
      </ul>
    </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
    name:'ranks',
    data () {
        return {
           msg:'',
           boxshow:true,
           id: localStorage.getItem('user_id'),
           uid: localStorage.getItem('user_uid'),
           from:'',
           thirds:false,
           seconds:false
        }
        
    },
    methods:{
        golasts(){
            this.$router.go(-1)
            console.log('返回上一层')
        },
         gogift(){
            this.$router.push("/gift_list")
        },
        goindex(){
            this.$router.push("/index")
        },
        godetail () {
            if(this.from == '0'){
               Toast({
                    message: '请联系老师发布档案！',
                    position: 'middle',
                    duration: 1000
                    })
            }else{
                 this.$router.push({
          path: '/study_detail',
          query: {
            godetail: 0
          }
        })
            }
         
        },
        goother(fromranks){
             this.$router.push({
          path: '/index',
          query: {
           fromranks: fromranks.id
          }
        })
        }
    },
    created (){
    var froms = this.$route.query.leng
    this.from = froms
      axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student_rank_list',{
        uid:this.uid
        }).then((val) => {
          this.msg = val.data.data;
          console.log(this.msg.length)
          if(this.msg.length > 2){
            
              this.seconds = true
               this.thirds = true
          }else{
              this.seconds = false
               this.thirds = false
          }
           console.log(this.msg);
        }).catch((err) => {
          console.log(err);
        })
        //   axios.post('https://shixiaozhang.cn/ api/app/courserecord/add_student_vote',{
        // uid:this.uid
        // }).then((val) => {
          
        //   this.msg = val.data.data;
        //    console.log(this.msg);
        // }).catch((err) => {
        //   console.log(err);
        // })
   },
    mounted(){
       this.WXConfig.wxShowMenu(); 
   },
}
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all .1s ease;
}
.slide-fade-leave-active {
  transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.wrapper-container{
    width: 100%;
    height: auto;
    background: #35B6A8; /* 标准的语法 */

}
.Student-track-record-img{
  width: 100%;
  height: 7.3rem;
  position: relative;
}
.backg {
  position:absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.exchange{
    position: absolute;
    right: 6%;
    top: 15%;
    width: 1.37rem;
    height: .69rem;
    border-radius: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .22rem;
    background: orange;
}

.exchange1{
    right: 5%;
    top:0;
    width: 1.2rem;
    height: .6rem
}
.exchange2{
    right: 5%;
    top:23%;
    width: 1.2rem;
    height: .6rem
}
.picture01{
    width: 50%;
    margin-left: 25%;
    height:80%;
    margin-top: 5%;
    margin-bottom:.2rem
}
.picture01 > img{
    width: 100%;
    height: 100%
}
.icon-fanhui{
  width:.5rem;
  height: .7rem;
  font-size: .5rem;
  line-height: .7rem;
  float: left;
  color: #fff;
  position:absolute;
  z-index: 999;
}
.ALLRecord{
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .35rem;
  color:#fff;
  padding-top: .1rem;
  position: absolute;
}
.number1{
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    border-radius: 50%;
    top: 27%;
    left: 38.5%;
    border: 2px solid gold;
}
.number1> .one{
   display: block;
   background: gold;
   width: .53rem;
   height: .53rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .53rem;
   border-radius: 50%;
   position: relative;
   bottom: .3rem;
   left: 33%
}
.number1 >.name1{
   display: block;
   width: 1rem;
   height: .63rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .63rem;
   position: relative;
   bottom: .3rem;
   left: 23%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.number > .hot {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 1.11rem;
    height: 1rem;
    font-size: .28rem;
    color: #fff;
    margin-left: 8%;
   
}
.number > .hots{
    margin-left:12%;
  
}
.number > .hot >span:nth-child(2){
  color:#fff;
  width: 1.11rem;
  height: .4rem;
  background:rgba(178, 211, 205, 0.5);
  border-radius:20px; 
  font-size: .26rem;
  text-align: center;
  line-height: .4rem;
}
.number2{
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    position: absolute;
    top: 37%;
    left: 16%;
    border: 2px solid silver;
}
.number2 > .two {
   display: block;
   background: silver;
   width: .53rem;
   height: .53rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .53rem;
   border-radius: 50%;
   position: relative;
   bottom: .3rem;
   left: 31%
}
.number2 >.name2{
   display: block;
   width: 1rem;
   height: .63rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .63rem;
   position: relative;
   bottom: .2rem;
   left: 12%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.number3{
    display:block;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    position: absolute;
    background: pink;
    top: 41%;
    right: 15.5%;
    border: 2px solid #09587069;
}
.number3 > .three{
   display: block;
   background: #dbd804;
   width: .53rem;
   height: .53rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .53rem;
   border-radius: 50%;
   position: relative;
   bottom: .3rem;
   left: 31%
}
.number3 >.name3{
   display: block;
   width: 1rem;
   height: .63rem;
   font-size: .32rem;
   color: #fff;
   text-align: center;
   line-height: .63rem;
   position: relative;
   bottom: .2rem;
   left: 18%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.number>img{
    width: 100%;
    height: 100%;
    border-radius:50% 
}
.perhot{
    width: 90%;
    position: absolute;
    bottom: -15%;
    left:5%;
    height: 1.6rem;
    background: #fff;
    box-shadow: 0px 5px 5px  #cecece; 
}
.perhot >img:nth-child(1){
    width:2.34rem;
    height: .67rem;
    position: absolute;
    right: 5%;
    top: -16%;
}
.perhot >.ranksing{
    position: absolute;
    right: 12%;
    top: -13%;
    color:#fff;
    display: block;
    width: 1.5rem;
    font-size: .28rem;
    text-align: center;
    
}
.perhot>.perlist{
    width: 100%;
    height: 80%;
    margin-top: 5%
}
.perhot>.perlist>li{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .24rem;
    color: #000;
}
.perhot>.perlist>li>img{
    width: .99rem;
    height: .99rem;
    border-radius: 50%;
    margin-left:-25%;
}
.rankname{
    display: block;
    width: 50%;
    position: absolute;
    top: 6.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .32rem;
    color: #fff;
    height: .76rem;
    margin-left:25%;
    z-index: 999;
}

.rankname>img{
    width: 100%;
    height:100%;
    position: absolute;
    left: 0;
    top: 5%;
   
}
.hasword{
    width: 30%;
    height: .2rem;
    top:3%;
   margin-left: 35%;
   font-weight:400;
   color:rgba(116,116,116,1);
   font-size: .2rem
}
.rankname>span{
  z-index: 999
}
.ranklist{
    position: relative;
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background: #fff;
    box-shadow: 0px 2px 2px 2px #cecece;
    overflow: hidden;
    background: #35B6A8; /* 标准的语法 */
}
.ranklist > li {
    width: 90%;
    margin-left: 5%;
    height: 1.5rem;
    margin-left: 5%;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items:center;
    font-size: .24rem;
    color: #000;
    background: #fff
}
.ranklist >li >img{
    width: .99rem;
    height: .99rem;
    border-radius: 50%;
    margin-left:-7%;
}
.namesings{
    width: 80%;
    margin-left: 10%;

}
.noborder{
    height: auto;
    padding-bottom: 0;
   padding-top:0;
    background: #35B6A8;
}
.noborder>li{
    border:none;
    height: 4.5rem;
   overflow: hidden;
    display: block;
    padding-left: 5%;
    position: relative;
    
}
.numberli1{
   padding-top:1rem
}

.icon-Group-{
    width: .5rem;
    height: .5rem;
    font-size: .5rem;
    /* position: absolute;
    right: 5%;
    top: 5%; */
    color:#fff;
    z-index: 999;
}
 .ups{
    width: 2rem;
    height: .5rem;
    font-size: .3rem;
    /* position: absolute;
    right: 1%;
    top: 55.4%; */
    color: #c0bbbbfa;
    z-index: 999;
}
.ranksings{
    top:.7rem;
    font-size: .32rem;
    color: #fff;
   
}
.upanddown{
    width: 2.1rem;
    position: absolute;
    right: -.3rem;
    top: 7.4rem;
    z-index: 9999;
}
</style>
